<template>
  <header class="main-header">
    <div class="sw-header-navbar">
      <div class="sw-navbar-content">
        <div class="sw-navbar-content-l">
          <el-menu
              :default-active="activeIndex"
              class="el-menu-demo sw-header-navigation"
              mode="horizontal"
              popper-append-to-body="false"
              @select="handleSelect"
          >
            <el-menu-item index="1"><a href="/" class="sw-logo-img" title="标志情报局"></a></el-menu-item>
            <el-sub-menu index="2" popper-class="child-menu">
              <template #title>Workspace</template>
              <el-menu-item index="2-1">item one</el-menu-item>
              <el-menu-item index="2-2">item two</el-menu-item>
              <el-menu-item index="2-3">item three</el-menu-item>
              <el-sub-menu index="2-4">
                <template #title>item four</template>
                <el-menu-item index="2-4-1">item one</el-menu-item>
                <el-menu-item index="2-4-2">item two</el-menu-item>
                <el-menu-item index="2-4-3">item three</el-menu-item>
              </el-sub-menu>
            </el-sub-menu>
            <el-menu-item index="3" disabled>Info</el-menu-item>
            <el-menu-item index="4">Orders</el-menu-item>
          </el-menu>
        </div>
        <div class="sw-navbar-content-r">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item style="margin-bottom: 0">
              <el-input
                  v-model="searchKeyword"
                  placeholder="Please input"
                  size="small"
                  class="input-with-select"
              >
                <template #append>
                  <el-button @onClick="onSubmit" size="small" :icon="search" />
                </template>
              </el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="sw-header-bottom-navbar">
        <div class="sw-navbar">
          <div class="sw-bar"></div>
        </div>
      </div>
    </div>
    <div class="sw-header-top">
      <div class="sw-header-cont">
        <span class="sw-header-top-lef">
             标志情报局 - 全球LOGO新闻和品牌设计趋势平台
        </span>
        <span class="sw-header-top-rig">
            <li class="sw-header-top-rig-li"><a href="//m.logonews.cn/?mark=mobile&amp;id=0" target="_blank">手机版</a></li>
            <li class="sw-header-top-rig-li"><a id="StranLink" class="wencode" href="javascript:StranBody()" title="點擊以繁體中文方式浏覽"><i class="iconfont "></i> 繁體閱讀</a></li>
            <li class="sw-header-top-rig-li"><a href="https://brandren.link/" target="_blank" class="hotlink" rel="nofollow"><i class="iconfont brandren_link"></i> 网址导航</a></li>
        </span>
      </div>
    </div>
  </header>

  <section class="main-content">

    <div class="section-cont swiper">
      <el-row class="section-container" :gutter="20">
        <el-col :span="19"><div class="grid-content">
          <el-carousel style="margin-top:14px;" height="520px">
            <el-carousel-item v-for="item in 4" :key="item">
              <h3 style="color: #475669; opacity: 0.75; line-height: 520px;margin: 0;text-align: center;background:black" class="small justify-center" text="2xl">{{ item }}</h3>
            </el-carousel-item>
          </el-carousel>
        </div></el-col>
        <el-col :span="5">
          <div class="grid-content">
            <ul class="swiper-right">
              <li>
                <el-card :body-style="{ padding: '0px' }">
                  <el-image fit="scale-down"
                            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                            class="image"
                  />
                  <div style="padding: 0px 14px 5px">
                    <span>Yummy hamburger</span>
                    <div>
                      <p class="card-des">2022世界清洁能源装备大会LOGO和吉祥物请尊重别人的劳动成果</p>
                    </div>
                  </div>
                </el-card>
              </li>
              <li>
                <el-card :body-style="{ padding: '0px' }">
                  <el-image fit="scale-down"
                            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                            class="image"
                  />
                  <div style="padding: 0px 14px 5px">
                    <span>Yummy hamburger</span>
                    <div>
                      <p class="card-des">2022世界清洁能源装备大会LOGO和吉祥物请尊重别人的劳动成果</p>
                    </div>
                  </div>
                </el-card>
              </li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="section-cont hot-arts mt-10">
      <el-row class="section-container" :gutter="20">
        <el-col :span="6">
          <div class="grid-content">
            <el-card :body-style="{ padding: '0px' }">
              <el-image fit="scale-down"
                        src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                        class="image"
              />
              <div style="padding: 0px 14px 5px">
                <div>
                  <p class="card-des">2022世界清洁能源装备大会LOGO和吉祥物请尊重别人的劳动成果</p>
                </div>
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content">
            <el-card :body-style="{ padding: '0px' }">
              <el-image fit="scale-down"
                        src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                        class="image"
              />
              <div style="padding: 0px 14px 5px">
                <div>
                  <p class="card-des">2022世界清洁能源装备大会LOGO和吉祥物请尊重别人的劳动成果</p>
                </div>
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content">
            <el-card :body-style="{ padding: '0px' }">
              <el-image fit="scale-down"
                        src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                        class="image"
              />
              <div style="padding: 0px 14px 5px">
                <div>
                  <p class="card-des">2022世界清洁能源装备大会LOGO和吉祥物请尊重别人的劳动成果</p>
                </div>
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content">
            <el-card :body-style="{ padding: '0px' }">
              <el-image fit="scale-down"
                        src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                        class="image"
              />
              <div style="padding: 0px 14px 5px">
                <div>
                  <p class="card-des">2022世界清洁能源装备大会LOGO和吉祥物请尊重别人的劳动成果</p>
                </div>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="section-cont ls-add mt-10">
      <el-row class="section-container" :gutter="20">
        <el-col :span="24">
          <div class="grid-content">
            <ul>
              <li><a><span>JAVA</span></a></li>
              <li><a><span>PHP</span></a></li>
              <li><a><span>Spring Boot</span></a></li>
              <li><a><span>Laravel</span></a></li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="section-cont main-con mt-10">
      <el-row class="section-container" align="middle" :gutter="20">
        <el-col class="mb-20" :span="6">
          <div class="grid-content">
            <el-card :body-style="{ padding: '0px' }">
              <div class="image" style="background-image: url('https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png')" ></div>
              <div class="image-text">
                <span>Yummy hamburger</span>
                <div>
                  <p class="card-des">2022世界清洁能源装备大会LOGO和吉祥物请尊重别人的劳动成果</p>
                </div>
                <div>
                  <p class="card-des">2022.10.11 <span class="f-r">杜新龙</span></p>
                </div>
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col class="mb-20" :span="6">
          <div class="grid-content">
            <el-card :body-style="{ padding: '0px' }">
              <div class="image" style="background-image: url('https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png')" ></div>
              <div class="image-text">
                <span>Yummy hamburger</span>
                <div>
                  <p class="card-des">2022世界清洁能源装备大会LOGO和吉祥物请尊重别人的劳动成果</p>
                </div>
                <div>
                  <p class="card-des">2022.10.11 <span class="f-r">杜新龙</span></p>
                </div>
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col class="mb-20" :span="6">
          <div class="grid-content">
            <el-card :body-style="{ padding: '0px' }">
              <div class="image" style="background-image: url('https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png')" ></div>
              <div class="image-text">
                <span>Yummy hamburger</span>
                <div>
                  <p class="card-des">2022世界清洁能源装备大会LOGO和吉祥物请尊重别人的劳动成果</p>
                </div>
                <div>
                  <p class="card-des">2022.10.11 <span class="f-r">杜新龙</span></p>
                </div>
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col class="mb-20" :span="6">
          <div class="grid-content">
            <el-card :body-style="{ padding: '0px' }">
              <div class="image" style="background-image: url('https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png')" ></div>
              <div class="image-text">
                <span>Yummy hamburger</span>
                <div>
                  <p class="card-des">2022世界清洁能源装备大会LOGO和吉祥物请尊重别人的劳动成果</p>
                </div>
                <div>
                  <p class="card-des">2022.10.11 <span class="f-r">杜新龙</span></p>
                </div>
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col class="mb-20" :span="6">
          <div class="grid-content">
            <el-card :body-style="{ padding: '0px' }">
              <div class="image" style="background-image: url('https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png')" ></div>
              <div class="image-text">
                <span>Yummy hamburger</span>
                <div>
                  <p class="card-des">2022世界清洁能源装备大会LOGO和吉祥物请尊重别人的劳动成果</p>
                </div>
                <div>
                  <p class="card-des">2022.10.11 <span class="f-r">杜新龙</span></p>
                </div>
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col class="mb-20" :span="6">
          <div class="grid-content">
            <el-card :body-style="{ padding: '0px' }">
              <div class="image" style="background-image: url('https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png')" ></div>
              <div class="image-text">
                <span>Yummy hamburger</span>
                <div>
                  <p class="card-des">2022世界清洁能源装备大会LOGO和吉祥物请尊重别人的劳动成果</p>
                </div>
                <div>
                  <p class="card-des">2022.10.11 <span class="f-r">杜新龙</span></p>
                </div>
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col class="mb-20" :span="6">
          <div class="grid-content">
            <el-card :body-style="{ padding: '0px' }">
              <div class="image" style="background-image: url('https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png')" ></div>
              <div class="image-text">
                <span>Yummy hamburger</span>
                <div>
                  <p class="card-des">2022世界清洁能源装备大会LOGO和吉祥物请尊重别人的劳动成果</p>
                </div>
                <div>
                  <p class="card-des">2022.10.11 <span class="f-r">杜新龙</span></p>
                </div>
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col class="mb-20" :span="6">
          <div class="grid-content">
            <el-card :body-style="{ padding: '0px' }">
              <div class="image" style="background-image: url('https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png')" ></div>
              <div class="image-text">
                <span>Yummy hamburger</span>
                <div>
                  <p class="card-des">2022世界清洁能源装备大会LOGO和吉祥物请尊重别人的劳动成果</p>
                </div>
                <div>
                  <p class="card-des">2022.10.11 <span class="f-r">杜新龙</span></p>
                </div>
              </div>
            </el-card>
          </div>
        </el-col>

      </el-row>
    </div>

  </section>

  <footer class="footer-con">
    <div class="section-cont">
      <el-row class="section-container" :gutter="20">
        <el-col :span="18">
          <div class="grid-content">
            <p style="margin:30px 0px 30px;line-height: 20px;color:#858383;">
              @2021 Spring Boot +  Vue3 <br />
              QQ：357182695  微信：林中小鸟<br />
              Mysql Spring Cloud  Eureka Mybatis Vue Router
            </p>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content">
            <p style="margin-top:60px;">
              <a style="color:#858383;" href="#">豫IPC201-31</a>
            </p>
          </div>
        </el-col>
      </el-row>
    </div>
  </footer>

</template>
<script>
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'

export default {
  components: {
  },
  data() {
    return {
      search:Search,
      activeIndex: ref('1'),
      searchKeyword:ref(''),
    }
  },
  watch:{

  },
  async created(){
    await this.getDataByApi();
  },
  methods: {
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    },
    onSubmit () {
      console.log('submit!')
    },
    async getDataByApi(){
      await this.$API.home.getMnue().then(res => {
        if(res.success) {
          this.total = res.data.pageInfo.total
        }
      })
      await this.$API.home.getMnue().then(res => {
        if(res.success) {
          this.total = res.data.pageInfo.total
        }
      })
      if(this.queryParams.uid == this.userInfo.user.id){
        this.password = true
      }
      console.log('data')
    }
  }
}
</script>

<style typeof="scss" scoped>
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.main-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  min-width: var(--body-min-width);
  background: var(--color-white);
  -webkit-box-shadow: 0 1px 6px rgb(0 0 0 / 10%);
  box-shadow: 0 1px 6px rgb(0 0 0 / 10%);
}
.sw-header-top{
  display: block;
  background-color: var(--color-white);
  color: #a9a9a9;
  border-top: 1px solid #f1f1f1;
}
.sw-header-cont{
  height: 30px;
  display: flex;
  justify-content: space-between;
  margin: auto;
  width: var(--web-width);
  line-height: 30px;
  letter-spacing: -.03em;
}
.sw-header-top-rig{
  position:relative
}
.sw-header-top-rig li{
  display: inline-block;
  padding: 0 8px;
  position: relative;
}
.sw-header-top-rig li a{
  color: #a9a9a9;
}
.sw-header-top-rig li a:hover{
  color: var(--color-red);
}
.sw-header-navbar{
  position: relative;
  height: 60px;
}
.sw-header-bottom-navbar{
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2px;
}
.sw-header-bottom-navbar .sw-navbar{
  width: 100%;
  height: 2px;
  z-index: 9999;
  top: 0;
  position:relative;
}
.sw-header-bottom-navbar .sw-navbar .sw-bar{
  width: 0;
  height: 100%;
  transition: height .3s;
  background: #ff5252;
}
.sw-navbar-content{
  position: relative;
  display: flex;
  margin: 0 auto;
  width: var(--web-width);
  height: 60px;
  line-height: 60px;
  justify-content: space-between;
}
.sw-navbar-content .sw-navbar-content-l{
  display: flex;
  align-items: center;
  position: relative;
}
.sw-navbar-content .sw-navbar-content-l a {
  color: var(--color-dark);
  text-decoration: none;
  cursor: pointer;
}
.sw-navbar-content .sw-navbar-content-l a.sw-logo-img{
  display: block;
  margin: 0 100px 0 0;
  width: 150px;
  height: 40px;
  background-image: url(/img/logo.svg?ver=5.9);
  background-size: contain;
  background-repeat: no-repeat;
}
.sw-navbar-content .sw-navbar-content-l .sw-header-navigation{
  border:0;
}
.sw-navbar-content .sw-navbar-content-r{
  position: relative;
  width: 280px;
  text-align: right;
}

.main-content{
  margin-top: 100px;
}
.main-content .section-cont{
  margin: auto;
  width: var(--web-width);
}
.main-content .section-container{
  display: flex;
  justify-content: space-between;
  margin: auto;
  width: var(--web-width);
  line-height: 30px;
  letter-spacing: -.03em;
  overflow:hidden;
}


.swiper ul.swiper-right li:first-child{
  margin-bottom:20px;
}
.swiper ul.swiper-right .image{
  max-height:160px;
}
.swiper ul.swiper-right li .card-des{
  font-size: 12px;
  line-height: 16px;
  margin: 0;
  color: #858383;
  margin-bottom: 10px;
}

.hot-arts .image{
  max-height:160px;
  width:100%;
  overflow: hidden;
}
.hot-arts .card-des{
  font-size: 12px;
  line-height: 16px;
  margin: 0;
  color: #858383;
  margin-bottom: 10px;
}

.ls-add ul{
  background: #dedede;
  border-radius: 4px;
  overflow: hidden;
}
.ls-add ul li{
  float: left;
  margin: 0 35px
}
.ls-add ul li a{
  color:#ffffff;
}
.ls-add ul li:hover a{
  color: var(--color-red)
}
.ls-add ul li a span{

}

.main-con{

}
.main-con .image{
  height:160px;
  width:100%;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.main-con .image-text{
  padding: 0px 14px 5px
}
.main-con .image-text div p{
  font-size: 12px;
  line-height: 16px;
  margin: 0;
  color: #858383;
  margin-bottom: 10px;
}

.footer-con{
  background-color: #19232d;
}
.footer-con .section-cont{
  margin: auto;
  width: var(--web-width);
}

</style>

